<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 波形图</title>
    <!-- 引入 ECharts 主文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 创建一个容器元素，用于显示图表 -->
<div id="chart" style="width: 600px; height: 400px;"></div>

<script type="text/javascript">
    // 初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('chart'));

    // 定义数据
    var data = [
        { name: 'A', value: 3 },
        { name: 'B', value: 7 },
        { name: 'C', value: 9 },
        { name: 'D', value: 5 }
    ];

    // 配置项
    var option = {
        title: { text: '波形图' },
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            type: 'line',
            smooth: true,
            symbolSize: 10,
            itemStyle: { color: '#ffa500' },
            areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFF' }, { offset: 1, color: '#FFF' }])},
            lineStyle: { width: 2 },
            data: data
        }]
    };

    // 将配置项设置到图表上并渲染
    myChart.setOption(option);
</script>
</body>
</html>